<template>
  <div>
    <h2>客服报表</h2>
    <el-row>
      <el-col :span="6">
        <div class="count">
          <div class="p-left">
            <i class="el-icon-headset icon"></i>
          </div>
          <div class="tot">
            <span>客服总数</span>
            <el-button type="text">{{ newArr2[0] }}</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="f-left">
            <i class="el-icon-plus icon"></i>
          </div>
          <div class="tot">
            <span>新客服</span>
            <el-button type="text">{{ newArr2[1] }}</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="s-left">
            <i class="el-icon-time icon"></i>
          </div>
          <div class="tot">
            <span>进行中</span>
            <el-button type="text">{{ newArr2[2] }}</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="pr-left">
            <i class="el-icon-check icon"></i>
          </div>
          <div class="tot">
            <span>已完成</span>
            <el-button type="text">{{ newArr2[3] }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="followBox" v-if="showCount">
          <div class="fl-header">
            <span>客服统计</span>
            <el-button icon="el-icon-close" class="icon-btn" @click="closeCount"></el-button>
          </div>
          <div class="tabCont">
            <EchartLine :dataSource="lineData"></EchartLine>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="followBox" v-if="showPercent" >
          <div class="fl-header">
            <span>占比统计</span>
            <el-button icon="el-icon-close" class="icon-btn" @click="closePercent"></el-button>
          </div>
          <div class="breadCont">
            <EchartPie
              id="echarts"
              v-if="pieData.chartData.length > 0"
              :nameData="pieData.rows"
              :chartData="pieData.chartData"
              autoresize
            ></EchartPie>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="annulTab">
          <div>
            <div class="annul-header">
              <span>客服年度报告</span>
              <el-button icon="el-icon-close" class="icon-btn"></el-button>
            </div>

            <div>
              <el-table
                :data="tableData"
                height="600px"
                border
                style="width: 100%"
              >
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="Jan" label="1月"> </el-table-column>
                <el-table-column prop="Feb" label="2月"> </el-table-column>
                <el-table-column prop="Mar" label="3月"> </el-table-column>
                <el-table-column prop="Apr" label="4月"> </el-table-column>
                <el-table-column prop="May" label="5月"> </el-table-column>
                <el-table-column prop="Jun" label="6月"> </el-table-column>
                <el-table-column prop="Jul" label="7月"> </el-table-column>
                <el-table-column prop="Aug" label="8月"> </el-table-column>
                <el-table-column prop="Sept" label="9月"> </el-table-column>
                <el-table-column prop="Oct" label="10月"> </el-table-column>
                <el-table-column prop="Nov" label="11月"> </el-table-column>
                <el-table-column prop="Dec" label="12月"> </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import EchartLine from "@/components/Line";
import EchartPie from "@/components/Pie";
import { fourNum, cusSta, percent, YearReport } from "@/api/customer";
export default {
  name: "",
  components: {
    EchartLine,
    EchartPie,
  },
  created() {
    this.getFourNum();
    this.getCusSta();
    this.getPercent();
    this.yearReport();
  },
  data() {
    return {
      showPercent:true,
      showCount:true,
      newArr2: [],
      numbers: [],
      tableData: [
        {
          date:1,
          Jan:5
        },
        {
          date:2
        },
        {
          date:3
        },
        {
          date:4
        },
        {
          date:5,
          Mar:4
        },
        {
          date:6
        },
        {
          date:7,
          May:16
        },
        {
          date:8
        },
        {
          date:9
        },
        {
          date:10,
          Dec:1
        },
        {
          date:11
        },
        {
          date:12,
          Nov:8
        },
        {
          date:13
        },
        {
          date:14
        },
        {
          date:15
        },
        {
          date:16
        },
        {
          date:17
        },
        {
          date:18
        },
        {
          date:19
        },
        {
          date:20
        },
        {
          date:21
        },
        {
          date:22
        },
        {
          date:23
        },
        {
          date:24
        },
        {
          date:25,
          Aug:9
        },
        {
          date:26
        },
        {
          date:27
        },
        {
          date:28,
          Apr:7
        },
        {
          date:29
        },
        {
          date:30
        },
        {
          date:31
        },
      ],
      dataArr: [],
      lineData: {
        xAxis: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        yAxis: [
          {
            name: "客服数量",
            color: "#FF6F00",
            data: [0,0,0,0,0,0,0,0,0,0,0,0],
          },
        ],
      },
      pieData: {
        row: [], //类型
        chartData: [], //数字
      },
    };
  },

  methods: {
     //关闭占比
     closePercent(){
      this.showPercent=false
    },
    //关闭统计
    closeCount(){
      this.showCount=false
    },
    //YearReport接口-------------------------
    async yearReport() {
      let res = await YearReport();
      console.log('YearReport接口------',res.data.data);
    },
    //占比接口-------------------------------------
    async percentWay() {
      let res = await percent();
      // console.log("占比接口----------", res.data.data);
      let arr5 = res.data.data;
      let newArr5 = [];
      let newArr6 = [];
      for (let i = 0; i < arr5.length; i++) {
        newArr5.push(arr5[i].type);
        newArr6.push(arr5[i].total);
      }
      this.pieData.rows = newArr5;
      this.pieData.chartData = newArr6;
    },
    //占比方法------------------------------------
    getPercent() {
      this.percentWay();
    },
    //客服统计方法-----------------------------
    getCusSta() {
      this.cusStatistics();
    },
    //客服统计接口-----------------------------
    async cusStatistics() {
      let res = await cusSta();
      // console.log("客服统计接口-------", res.data.data);
      let arr12 = res.data.data;
      let YData=[0,0,0,0,0,0,0,0,0,0,0,0];
      let arr20=[]
      for (let i = 0; i < arr12.length; i++) {
        YData.push(arr12[i].count);
      }
      // console.log(YData,'1111');
      arr20=YData.slice(12,24)
      // console.log('arr20',arr20);
      this.lineData.yAxis[0].data=arr20;
    },
    //四个数据接口方法------------------------------
    getFourNum() {
      this.fourNum();
    },
    //四个数据接口------------------------------
    async fourNum() {
      let res = await fourNum();
      // console.log(res.data.data);
      let arr = res.data.data;
      let newArr = [];
      for (let i = 0; i < arr.length; i++) {
        newArr.push(arr[i].total);
      }
      // console.log(newArr);
      this.newArr2 = newArr;
    },
  },
};
</script>
<style scoped>
h2 {
  margin: 10px;
}

.count {
  height: 100px;
  background-color: white;
  margin: 10px;
  position: relative;
}

.p-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #dd4b39;
}

.f-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #f39c12;
}

.s-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00c0ef;
}

.pr-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00a65a;
}

.tot {
  position: absolute;
  top: 10px;
  left: 110px;
  display: flex;
  flex-direction: column;
}

.icon {
  font-size: 50px;
  color: white;
  position: absolute;
  left: 25px;
  top: 25px;
}

.followBox {
  height: 300px;
  margin: 10px;
  border-top: 3px solid #ccc;
  background-color: rgb(255, 255, 255);
}

.fl-header {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-btn {
  border: none;
}

.annulTab {
  margin-left: 10px;
  margin-right: 10px;
  box-sizing: content-box;
}

.annul-header {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255);
  border-top: 3px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
